var timeZ;
var timeZ_t = 770; //总控制时间
var cleanBlack; //黑色未点击  计时器
var rowBox;

// 点击GO
$('.go .num p').on('click', function () {
    // 开启总计时器
    timeFun()
    $('.go').remove();
    $('#music')[0].play();

})

// 动态添加div块
function create() {
    var row = $('<div/>').addClass('row');
    // 使用for循环将div插入行row
    for (var i = 0; i < 4; i++) {
        rowBox = $('<div/>').addClass('row-box');
        // 添加到行
        row.append(rowBox);
    }
    black()
    // 将行添加到web中
    $('.web .bigBox').append(row);
}

// div向下移动

function mobile() {
    var lastRow = $('.web .row:last');
    var h = -150;
    var mobileTimer = setInterval(function () {
        h += 1.5;
        if (h > $(window).height() + 150 && ($('.web .row:first div').hasClass('bgBlack'))) {
            hasBack()
        } else if (h > $(window).height() + 150) {
            clearInterval(mobileTimer);
            lastRow.remove();
        } else {
            lastRow.css('transform', 'translateY(' + h + 'px)');
        }
    }, timeZ_t / 90);

}

function timeFun() {
    //时间1器  添加div 和移动div
    timeZ = setInterval(function () {
        // 添加div
        create();
        // 向下移动
        mobile();
    }, timeZ_t);
}

// 随机变化产生黑块
function black() {
    var j = Math.floor(Math.random() * 4);
    $('.web .row:last div').eq(j).addClass('bgBlack');

}

//点击黑块变色
// 计算分数
var f = 0;
var i;
$('.web ').on('click', '.row div', function () {

    if ($(this).hasClass('bgBlack')) {
        $(this).attr('class', 'bgBlack2');
        // 写入分数
        f++;
        $('.score p').replaceWith('<p>' + f + '</p>');
        // 加速
        // timeZ_t-=12;
        // 黑块产生
        if (f > 15) {
            i = Math.floor(Math.random() * 4);
            $('.web .row:last div').eq(i).addClass('bgBlack');
        }
        var m = Math.floor(Math.random() * 13 + 1);
        // 点击黑块播放音乐
        $('#music_' + m + 's')[0].play();
    } else {
        // 点击白块结束游戏
        $(this).addClass('writeAnim');
        clearInterval(timeZ);
        setTimeout(function () {
            $('.over').css('display', 'block');
            $('.web .row').remove();
            $('#music')[0].pause();
        }, 500);
    }

})

function hasBack() {
    $('.over').css('display', 'block');
    $('.web .row').remove();
    $('#music')[0].pause();
    clearInterval(timeZ);
}